<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
      }

      .header {
        height: 50px;
        line-height: 50px;
        background: rgba(47, 47, 47, 0.98);
      }

      section {
        width: 600px;
        padding: 0 10px;
        margin: 0 auto;
      }

      label {
        float: left;
        width: 100px;
        line-height: 50px;
        color: #ddd;
        font-size: 24px;
        cursor: pointer;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      }

      .header input {
        float: right;
        width: 60%;
        height: 24px;
        margin-top: 12px;
        text-indent: 10px;
        border-radius: 5px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24),
          0 1px 6px rgba(0, 0, 0, 0.45) inset;
        border: none;
      }

      h2 {
        position: relative;
      }

      ol,
      ul {
        padding: 0;
        list-style: none;
      }

      li {
        height: 32px;
        line-height: 32px;
        background: #fff;
        position: relative;
        margin-bottom: 10px;
        padding: 0 45px;
        border-radius: 3px;
        border-left: 5px solid #629a9c;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
      }

      li input {
        position: absolute;
        top: 2px;
        left: 10px;
        width: 22px;
        height: 22px;
        cursor: pointer;
      }

      ul li {
        border-left: 5px solid #999;
        opacity: 0.5;
      }

      a,
      span {
        position: absolute;
        top: 2px;
        right: 5px;
        display: inline-block;
        padding: 0 5px;
        height: 20px;
        border-radius: 20px;
        background: #e6e6fa;
        line-height: 22px;
        text-align: center;
        color: #666;
        font-size: 14px;
      }
    </style>
  </head>

  <body>
    <div class="header">
      <section>
        <label for="">备忘录</label>
        <input
          type="text"
          id="title"
          name="title"
          placeholder="新增待办事项"
          required
        />
      </section>
    </div>
    <section>
      <h2>正在进行<span id="todocunt"></span></h2>
      <ol id="todolist" class="demo-box">
        <li>
          <input type="checkbox" name="" id="" />
          <p>123</p>
          <a href="#"></a>
        </li>
      </ol>
      <h2>已经完成<span id="donecount"></span></h2>
      <ul id="donelist"></ul>
      <footer>Copyright © 2014 todolist.cn</footer>
    </section>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script>
      //添加代办事项
      //输入框绑定键盘事件
      function add() {
        $("#title").on("keydown", function (event) {
          var content = $(this).val();
          switch (event.keyCode) {
            case 13:
              if (content.trim() === "") {
                alert("您没有输入任何备忘事件");
                return false;
              }
              var html = `<li>
             <input type="checkbox" >
             <p>${content}</p>
             <a href="#">删除</a>   
             </li>`;
              $("#todolist").prepend(html);
              //清空输入框内容
              $(this).val("");
              count();
              addToCom();
              del();
          }
        });
      }

      //统计事项数量
      function count() {
        var count1 = $("#todolist>li").length;
        $("#todocount").text(count1);
        var count2 = $("#donelist>li").length;
        $("#donecount").text(count2);
      }

      //选择添加到已完成列表里
      function addToCom() {
        $("#todolist li input").on("click", function () {
          var $li = $(this).parent();
          if ($(this).prop("checked")) {
            $("#donelist").prepend($li);
          } else {
            $("#todolist").prepend($li);
          }

          count();
        });
      }

      //删除按钮
      function del() {
        $("a")
          .off("click")
          .on("click", function () {
            var flag = confirm("是否要删除记录？");
            if (flag) {
              $(this).parent().remove();
            } else {
              return false;
            }
            count();
          });
      }

      $(function () {
        add();
        count();
        addToCom();
        del();
      });
    </script>
  </body>
</html>
